<template>
<div class="poe-list">
    <!-- 切换按钮 -->
    <div class="btn_box">
        <div :class="[ 'btn', choosed == 1 ?  'btn-bb' : '']" @click="chooseBB(1)">必背古诗</div>
        <div :class="[ 'btn', choosed == 2 ?  'btn-bb' : '']" @click="chooseBB(2)">选背古诗</div>
    </div>
    <div class="list-body full flexBox">
        <div class="head">已背{{ybNum}}首，还剩{{bbNum}}首</div>
        <div class="poetry-list flexCol" ref="poetry-list" id="scroll">
            <div class="poetry" :class="{'isActive':item.playing}"   v-for="(item,index) in poetryList" :key="'i'+index"  @click="returnBack(item)">
                <div class="num">{{index +1}}</div>
                <div class="name">{{item.name}}</div>
                <div class="star" :class="{'read':item.isRead}"></div>
            </div>
            <div class="bottom-tips">{{bottomTip}}</div>  
        </div>
    </div>
</div>
</template>

<script>
 import { getParames,touchFalse,touchTrue } from '@/utils/common'
//  import { axGet,urlFun } from '@/api/index'
import {mapActions} from 'vuex'
import * as api from '@/api/index';
export default {
  name: 'poeList',
  props:[
      "poeId",
      "hasPlay",
      "isShow"
  ],
  data () {
    return {
        choosed:1, //1必背古诗 2课外古诗
        poetryList:[], //古诗列表
        classList:[],
        userInfo: JSON.parse(localStorage.getItem("userInfo")),	
        bbNum:'',
        ybNum:'',
        listPage:1,
        totalPage:1,
        bottomTip:'暂无数据',
        isLoading:true,
    }
  },
  mounted:function(){
        //  console.log('poeId',this.poeId,this.hasPlay)
        //初始化获取必备古诗
        this.classList=this.userInfo.classList
        this.getNum('bb')
        this.getPoetryList(10,1)
        this.$nextTick(()=>{
             this.$refs['poetry-list'].addEventListener('scroll',this.handleScroll)
        })
 
  },
  watch:{
        poeId(newVal,oldVal){
          console.log('888888',newVal,oldVal)
            this.poetryList.forEach((item,i)=>{
                item.playing=false;
                item.isChose=false;
                if(item.id==this.poeId){
                    item.isChose=true
                    if(this.hasPlay){
                        item.playing=true
                    }
                }
            })
      },
      choosed(val){
           console.log(val,"切换标签卡")
           this.$emit('getPoetryListAll')
           this.listPage = 1;
           if(val == 2){
               this.getNum('xb')
           }else if(val ==1){
              this.getNum('bb')
           }
           this.getPoetryList(10,1);
           this.poetryList =[]
      },
      hasPlay(newVal,oldVal){
            this.poetryList.forEach((item,i)=>{
                item.playing=false;
                if(item.id == this.poeId && newVal){
                    // console.log(this.$parent.$refs['in-audio'].playing)
                    item.playing=true
                }
            })
      },
  },
    methods:{
        ...mapActions(['setPoeId']),
        async getNum(flag){
            var data={
                userId:this.userInfo.userId,
				futureId:this.userInfo.futureId,
			}
            var res=await api.getPoetryIndexInfo(data)
            // console.log('9999',res)
            if(res.resultCode==1){
                if(flag == 'bb'){
                    this.ybNum =res.value.mustUserReadCount
                    this.bbNum = res.value.mustCount - res.value.mustUserReadCount
                }else if(flag == 'xb'){
                    this.bbNum =res.value.selectCount - res.value.selectUserReadCount
                    this.ybNum = res.value.selectUserReadCount
                }
                
            }
        },
        refreshMethods(){
            this.getNum('bb')
            this.getPoetryList(10,1)
        },
        chooseBB(num){
            this.choosed =num
        },
        returnBack(list){
            // console.log('list',list)
            this.setPoeId(list.id)
            if(this.isShow && this.isShow =='show'){
                if(this.hasPlay){
                    this.$emit('stopBtn')
                }
                this.$emit('poeChange',list.id,1)
            }else{
                console.log(list,"list")
                this.$router.push({
                    path:'/poetry/player',
                    query:{
                        isRead:list.isRead,poeid:list.id,
                        type:this.choosed
                    }
                })
            }
        },
        async getPoetryList(num,page){
            this.isLoading = false;
            var data={
                userId:this.userInfo.userId,
				futureId:this.userInfo.futureId,
                readType:this.choosed,
                pageSize:num,
                pageIndex :page,
			}
            var res=await api.bookPoetryPage(data)
            
            if(res.resultCode==1){
                
                res.value.map(item =>{
                    if((item.id == this.poeId) && this.hasPlay){  
                        item.playing =true
                    }else{
                        item.playing =false
                    }
                })
                    this.poetryList.push(...res.value)
                    // console.log('res.V', this.poetryList)
                if(page==1){
                    this.totalPage=res.totalPage
                }
                if(page<this.totalPage){
                    this.bottomTip='上拉加载更多'
                }else{
                    this.bottomTip='没有更多数据了'
                }
                this.isLoading=true;
            }else{
                // alertMask(this.$parent,'接口请求错误') 
                this.isLoading=true; 
            }
            // console.log(this.isLoading,"getList")
        },
    // 滚动加载   
    handleScroll(){
        // let bodyH = document.documentElement.clientHeight || document.body.clientHeight;
        let bodyH = this.$refs['poetry-list'].clientHeight;
        let scrollH = this.$refs['poetry-list'].scrollTop;
        let listH=this.$refs['poetry-list'].scrollHeight;
        // console.log(scrollH+bodyH +10 >=listH,"高度判断")
        // console.log(this.isLoading,"Scroll")
        if(scrollH+bodyH +10 >=listH && this.isLoading){
            this.isLoading=false
            this.bottomTip='努力加载中...'
            
            this.listPage=this.listPage+1;

            // console.log(this.listPage,this.totalPage)
            if(this.listPage <= this.totalPage){
                // let page=this.listPage;
                this.getPoetryList(10,this.listPage)
            }else{
                if(this.poetryList.length>0){
                    this.bottomTip=''
                    console.log('没有更多数据')
                }else{
                this.bottomTip='暂无数据'; 
                }
            }
        } 
    }
  }
}
</script>
<style  lang="scss" scoped>
    @import '~@/assets/scss/_public.scss';
//诗词列表
.poe-list{
    overflow: hidden;
    height: 100%;
    position: relative;
    // padding: .3rem;
    .bottom-tips{
        text-align: center;
    }
    .btn_box{
        width: 4.26rem;
        height: .65rem;
        margin: .2rem auto;
        background-color: #f3f5f7;
        font-size: .32rem;
        color: #666666;
        border-radius: .325rem;
        display: flex;
        .btn{
            width: 2.13rem;
            height: .65rem;
            line-height: .65rem;
            background-color: #f3f5f7;
            border-radius: .325rem;
            color: #666666;
        }
        .btn-bb{
            background-color: #00cd86; 
            color: #fff;
        }
    }
    .list-body{
      width: 100%;
      height: auto;
      padding-top: .2rem;
        .head{
            color: #333333;
            font-size: .4rem;
            padding: 0 .3rem;
        }
        .poetry-list{
            margin-top: .2rem;
            padding: 0 .3rem;
            width: 100%;
            overflow: auto;
            .poetry-bg{
                background-color: #e5faf3;
                color: #00cd86;
                font-size: .36rem;
            }
            .poetry{
                width: 100%;
                height: .96rem;
                border-radius: .2rem;
                margin: .2rem 0;
                padding: 0 .3rem;
                display: flex;
                line-height: .96rem;
                align-items: center;
                background-color: #f7f9fc;
                color: #333333;
                font-size: .36rem;
                &.isActive{
                    background-color: #e5faf3;
                    color: #00cd86;
                    font-size: .36rem;
                }
                .star{
                    width: .4rem;
                    height: .4rem;
                    background: url('../../../assets/img/player/unBs.png') no-repeat;
                    background-size: 100% 100%;
                    &.read{
                        background: url('../../../assets/img/player/hasBs.png') no-repeat;
                        background-size: 100% 100%;
                    }
                }
                .num{
                    width: .8rem;
                    color: #adb9c7;
                    font-size: .38rem;
                }
                .name{
                    width: 5rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
        }
       
    }
}
    
</style>